<template>
  <div class="app-container">
    <div class="search">
      <el-form label-width="70px" :model="searchObj" :inline="true">
        <el-form-item label="模块标题" prop="title">
          <el-input v-model="searchObj.title" placeholder="菜单管理"></el-input>
        </el-form-item>
        <el-form-item label="操作人员" prop="operName">
          <el-input v-model="searchObj.operName" placeholder="admin"></el-input>
        </el-form-item>
        <el-form-item label="操作时间" prop="createTimes">
          <el-date-picker
            v-model="createTimes"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery()"><i-ep-search />搜索</el-button>
          <el-button @click="resetData"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">
      <!-- 列表 -->
      <el-table
        v-loading="listLoading"
        :data="logList"
        stripe
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column label="序号" width="70" align="center">
          <template v-slot="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="title" label="名称" width="130" />
        <el-table-column prop="operName" label="操作人" width="100" />
        <el-table-column prop="operUrl" label="操作路径" width="200" />
        <el-table-column prop="operParam" label="返回参数" width="200" />
        <el-table-column prop="status" label="状态" width="200" />
        <el-table-column prop="errorMsg" label="错误信息" width="200" />
        <el-table-column prop="createTime" label="创建时间" width="200" />
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.page"
        v-model:limit="queryParams.limit"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "loginLog",
};
</script>
<script lang="ts" setup>
import { operLogApi } from "@/api/log";
import { LogQuery, LogPageVO } from "@/api/log/type";
import { DateModelType } from "element-plus";
import { reactive, onMounted, toRefs, ref } from "vue";

const queryParams = reactive<LogQuery>({
  page: 1,
  limit: 10,
});
const state = reactive({
  listLoading: false, // 数据是否正在加载
  list: null, // 列表
  total: 0, // 数据库中的总记录数
  page: 1, // 默认页码
  limit: 12, // 每页记录数
  createTimes: [],
});
const {
  listLoading,
  total, // 数据库中的总记录数
  page, // 默认页码
  limit, // 每页记录数
} = toRefs(state);
const logList = ref<Array<LogPageVO>>([]);
const searchObj = reactive({
  createTimeBegin: "" as DateModelType,
  createTimeEnd: "" as DateModelType,
  username: "",
  operName: "",
  title: "",
});
const createTimes = ref<[DateModelType, DateModelType]>();
const { createTimeBegin, createTimeEnd } = toRefs(searchObj);
onMounted(() => {
  handleQuery();
});

// 重置查询表单
function resetData() {
  console.log("重置查询表单");
  Object.assign(searchObj, {});
  createTimes.value = ["", ""];
  searchObj.username = "";
  searchObj.operName = "";
  searchObj.title = "";
  handleQuery();
}
//列表
function handleQuery() {
  if (createTimes.value && createTimes.value.length === 2) {
    createTimeBegin.value = createTimes.value[0];
    createTimeEnd.value = createTimes.value[1];
  }

  operLogApi(queryParams, searchObj).then((response) => {
    logList.value = response.data.records;
    total.value = response.data.total;
  });
}
</script>
